<!--
 * @Author: WangLong
 * @Date: 2024-02-02 14:57:06
 * @LastEditTime: 2024-02-27 11:48:02
 * @LastEditors: WangLong
 * @Description: 
 * @FilePath: \front_erp\src\components\qrCode\index.vue
-->
<template>
  <div class="qrcodeCatianer">
    <div class="qrcodeList">
      <div
        v-for="(qrCode, index) in qrCodeList"
        :key="index"
        class="qrcodeItem"
      >
        <div class="qrcodeTop">
          <img :src="qrCode.dataURL" :alt="qrCode.filename" />
          <div class="qrcodeRight">
            <el-button
              plain
              type="primary"
              @click="downloadQRCode(qrCode)"
              :disabled="!qrCode.dataURL"
              class="qrbtn"
            >
              下载
            </el-button>
            <el-button
              plain
              type="primary"
              @click="printQRCode(qrCode)"
              :disabled="!qrCode.dataURL"
              class="qrbtn"
            >
              打印
            </el-button>
          </div>
        </div>
        <p>{{ qrCode.content }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import QRCode from "qrcode";

const props = defineProps({
  // 操作类型
  qrcodeData: {
    type: Array,
    default: [],
  },
});
let qrcodeDataInfo = [];
watch(props, (newVal) => {
  qrcodeDataInfo = newVal.qrcodeData;
  generateQRCode();
});
qrcodeDataInfo = props.qrcodeData;
const qrCodeList = ref([]);
const generateQRCode = async () => {
  qrCodeList.value = []; // 清空列表
  if (qrcodeDataInfo.length > 0) {
    for (let i = 0; i < qrcodeDataInfo.length; i++) {
      const item = qrcodeDataInfo[i];
      try {
        const dataURL = await QRCode.toDataURL(item.materialNumber);
        qrCodeList.value.push({
          filename: `${item.materialNumber}.png`,
          dataURL: dataURL,
          content: item.materialNumber,
        });
      } catch (error) {
        console.error(`生成${item.materialNumber}的二维码失败`, error);
      }
    }
  }
};
/**
 * @description: 二维码下载
 * @param {Array} Number
 */
const downloadQRCode = (qrCode) => {
  const link = document.createElement("a");
  link.href = qrCode.dataURL;
  link.download = qrCode.filename;
  link.click();
};
/**
 * @description: 二维码打印
 * @param {Array} Number
 */
const printQRCode = (qrCode) => {
  const printWindow = window.open("", "_blank");
  const printContent = document.createElement("div");
  printContent.innerHTML = `
    <img src="${qrCode.dataURL}" alt="${qrCode.filename}">
    <p>${qrCode.content}</p>
  `;
  printWindow.document.body.appendChild(printContent);
  printWindow.print();
  printWindow.close();
};
onMounted(() => {
  generateQRCode();
});
</script>

<style lang="scss" scoped>
.qrcodeCatianer {
  width: 100%;
  height: 330px;
  .qrcodeList {
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    overflow-y: auto;
    .qrcodeItem {
      width: 200px;
      .qrcodeRight {
        p {
          text-align: center;
        }
        .qrcodeTop {
          display: flex;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-end;
          .qrbtn {
            width: 66px;
            height: 30px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>
